// 再该js 文件中使用css
import styled from 'styled-components';
// 定义样式的话,一般使用按需导出的方式
// 注意: 将css 样式写在模板字符串中, 语法和之前的css语法一致
// 01: 使用
export const Mytitle = styled.div`
    background-color: red;
    font-size: 30px;
`
export const Mytitle1 = styled.p`
    color: green;
    cursor: pointer;
`

// ...

// 02: 样式的继承
export const Mybuton = styled.button`
    width: 100px;
    height: 50px;
    background-color: red;
`

// 继承Mybutton 样式
// 注意: 如果当前组件的样式和继承的样式重复, 则使用当前组件自身的定义的样式,遵循就近原则
export const Mybuton1 = styled(Mybuton)`
    font-size: 20px;
    color:yellow;
    background-color: deeppink;
`

// 03: 样式的属性的传递

export const Myp = styled.p`
  color:red;
  background: ${(props) => { return props.background || 'green' }};
  font-size:${(props) => props['font-size']}

`
